System and method for generation of an interactive color workspace

ABSTRACT

The present invention relates to a computer-implemented system and method for generation of an interactive color workspace, the method including: generating a workspace; receiving successive inputs from a user to create two or more controllable color swatches, the controllable color swatches including an associated color; generating the controllable color swatches on the workspace; and upon receiving a command from a user to select and associate at least two of the controllable color swatches, generating a gradient of colors with the colors of the selected controllable color swatches as endpoints to the gradient.

FIELD OF THE INVENTION

The present specification relates generally to color palettes, and moreparticularly to a system and method for generation of an interactivecolor workspace.

BACKGROUND OF THE INVENTION

The following includes information that may be useful in understandingthe present disclosure. It is not an admission that any of theinformation provided herein is prior art nor material to the presentlydescribed or claimed inventions, nor that any publication or documentthat is specifically or implicitly referenced is prior art.

Color has been shown to impact human cognition and behavior, as well asinfluence emotion. Unsurprisingly, color plays a central role in manycreative visual domains, including graphic design, visualization, userinterface design, illustration, and beyond. Because of its importanceand its subjective nature, the choice of color can be challenging.Perhaps for this reason, there are dozens of books on color inspiration,as well as websites for creating, browsing and sharing color palettes(also known as color themes). While a color theme is important to anyvisual creation, conventional “color palettes” can be inefficient andnot particularly user-friendly.

SUMMARY OF THE INVENTION

In an aspect, there is provided a computer-implemented method forgeneration of an interactive color workspace, the method comprising:generating a workspace; receiving successive inputs from a user tocreate two or more controllable color swatches, the controllable colorswatches comprising an associated color; generating the controllablecolor swatches on the workspace; and upon receiving input from the userto select and associate at least two of the controllable color swatches,generating a gradient of colors comprising the colors of the selectedcontrollable color swatches as endpoints to the gradient.

In a particular case of the method, the workspace comprises a grid, andeach of the controllable color swatches comprise separate cells in thegrid.

In another case, the gradient of colors comprises a step gradient, eachstep in the gradient comprising a separate cell in the grid.

In yet another case, associating two of the controllable color swatchescomprises receiving input of one of the controllable color swatchesmoving within a predetermined proximity of the other controllable colorswatch and receiving input of the controllable color swatch separatingfrom the other controllable color swatch, wherein the gradient of colorsis generated between the separated controllable color swatches.

In yet another case, granularity of the color gradient is proportionalto the distance of the endpoints relative to the workspace.

In yet another case, granularity of the color gradient is selectable bythe user.

In yet another case, the method further comprising generating asecondary gradient of colors after receiving input from the user toassociate the gradient of colors with a first-additional controllablecolor swatch, the secondary gradient of colors having endpointscomprising the first-additional controllable color swatch and one of theendpoints of the gradient of colors.

In yet another case, the method further comprising generating a tertiarygradient of colors after receiving input from the user to associate thesecondary gradient of colors with a second-additional controllable colorswatch, the secondary gradient of colors comprising an area bound atleast by the first-additional controllable color swatch, thesecond-additional controllable color swatch, and one of the endpoints ofthe gradient of colors.

In yet another case, the method further comprising receiving a designfrom the user, and associating one or more colors in the workspace eachwith at least one area of the design.

In yet another case, the method further comprising receiving furtherinput from the user to change the associated color of at least one ofthe controllable color swatches, and changing the associated colors inthe workspace.

In yet another case, the method further comprising: receiving input fromthe user to select the associated color of one of the controllable colorswatches; displaying a neighborhood color map centered at the associatedcolor of the selected controllable color swatch, the neighborhood colormap comprising a gradient of colors distributed radially around thecenter; receiving a selection from the user of a color in theneighborhood color map; and modifying the color of the selectedcontrollable color swatch to the selected color.

In yet another case, the neighborhood color map is a two-dimensional(2D) visualization of a three-dimensional (3D) neighborhood color map,the 2D visualization being manipulatable with respect to the 3Dneighborhood color map via input from the user.

In another aspect, there is provided a system for generation of aninteractive color workspace, the system comprising one or moreprocessors and a data storage, the one or more processors configured toexecute a workspace module to: generate a workspace; receive successiveinputs from a user to create two or more controllable color swatches,the controllable color swatches comprising an associated color; generatethe controllable color swatches on the workspace; and upon receivinginput from the user to select and associate at least two of thecontrollable color swatches, generate a gradient of colors comprisingthe colors of the selected controllable color swatches as endpoints tothe gradient.

In a particular case of the system, the controllable color swatches aremoveable to different areas of the workspace, wherein associating two ofthe controllable color swatches comprises receiving input of one of thecontrollable color swatches moving within a predetermined proximity ofthe other controllable color swatch and receiving input of thecontrollable color swatch separating from the other controllable colorswatch, and wherein the gradient of colors is generated between theseparated controllable color swatches.

In another case, the workspace module further generates a secondarygradient of colors after receiving input from the user to associate thegradient of colors with a first-additional controllable color swatch,the secondary gradient of colors comprising endpoints as the color ofthe first-additional controllable color swatch and the color of aselected color in the gradient of colors.

In yet another case, the workspace module further generates a tertiarygradient of colors after receiving input from the user to associate thesecondary gradient of colors with a second-additional controllable colorswatch, the secondary gradient of colors comprising an area bound atleast by the first-additional controllable color swatch, thesecond-additional controllable color swatch, and the selected color inthe gradient of colors.

In yet another case, the one or more processors further configured toexecute a mapping module to receive a design from the user, andassociate one or more colors in the workspace each with at least onearea of the design.

In yet another case, the workspace module further: receives input fromthe user to select the associated color of one of the controllable colorswatches; displays a neighborhood color map centered at the associatedcolor of the selected controllable color swatch, the neighborhood colormap comprising a gradient of colors distributed radially around thecenter; receives a selection from the user of a color in theneighborhood color map; and modifies the color of the selectedcontrollable color swatch to the selected color.

In yet another case, the neighborhood color map is a two-dimensional(2D) visualization of a three-dimensional (3D) neighborhood color map,the 2D visualization being manipulatable with respect to the 3Dneighborhood color map via input from the user.

In another aspect, there is provided a computer-implemented method forgeneration of a color picker, the method comprising: receiving inputfrom a user to select a color swatch, the color swatch comprising anassociated color; displaying a neighborhood color map centered at theassociated color, the neighborhood color map comprising a gradient ofcolors distributed radially around the center; receiving a selectionfrom the user of a color in the neighborhood color map; and modifyingthe color of the selected controllable color swatch to the selectedcolor.

Other aspects and features according to the present application willbecome apparent to those ordinarily skilled in the art upon review ofthe following description of embodiments of the invention in conjunctionwith the accompanying figures.

BRIEF DESCRIPTION OF THE DRAWINGS

The patent or application file contains at least one drawing executed incolor. Copies of this patent or patent application publication withcolor drawing(s) will be provided by the Office upon request and paymentof the necessary fee.

Reference will now be made to the accompanying drawings which show, byway of example only, embodiments of the invention, and how they may becarried into effect, and in which:

FIG. 1 is an example of a color workspace generation interface accordingto an embodiment;

FIGS. 2A to 2C illustrate exemplary color palettes;

FIGS. 3A, 3B, 3C, 3D, 3E, and 3F show an example progression of colorpalette adjustment;

FIG. 4A is an example of a generated color workspace, Linking Pane, andassociated design, according to an embodiment;

FIG. 4B is an example progression of an associated design due to changesin the color workspace;

FIGS. 5A to 5R are examples of direct manipulation interaction of thegenerated color workspace of FIG. 4A;

FIGS. 6A to 6D are example visualizations of Linking Panes andassociated designs of the generated color workspace of FIG. 4A;

FIGS. 7A and 7B are examples color pickers according to otherapproaches;

FIGS. 7C and 7D are examples of color pickers according to anembodiment;

FIGS. 8A and 8B are examples of color representation in Lab space;

FIG. 9A illustrates example uses of a previous color tool;

FIG. 9B illustrates example uses of color workspaces and associateddesigns, in accordance with an embodiment;

FIG. 10 is a schematic diagram of a system for generation of aninteractive color workspace, in accordance with an embodiment;

FIG. 11 is a schematic diagram showing the system of FIG. 10 and anexemplary operating environment; and

FIG. 12 is a flow chart of a method for generation of an interactivecolor workspace, in accordance with an embodiment.

DETAILED DESCRIPTION OF THE EMBODIMENTS

Embodiments will now be described with reference to the figures. Forsimplicity and clarity of illustration, where considered appropriate,reference numerals may be repeated among the Figures to indicatecorresponding or analogous elements. In addition, numerous specificdetails are set forth in order to provide a thorough understanding ofthe embodiments described herein. However, it will be understood bythose of ordinary skill in the art that the embodiments described hereinmay be practiced without these specific details. In other instances,well-known methods, procedures and components have not been described indetail so as not to obscure the embodiments described herein. Also, thedescription is not to be considered as limiting the scope of theembodiments described herein.

Various terms used throughout the present description may be read andunderstood as follows, unless the context indicates otherwise: “or” asused throughout is inclusive, as though written “and/or”; singulararticles and pronouns as used throughout include their plural forms, andvice versa; similarly, gendered pronouns include their counterpartpronouns so that pronouns should not be understood as limiting anythingdescribed herein to use, implementation, performance, etc. by a singlegender; “exemplary” should be understood as “illustrative” or“exemplifying” and not necessarily as “preferred” over otherembodiments. Further definitions for terms may be set out herein; thesemay apply to prior and subsequent instances of those terms, as will beunderstood from a reading of the present description.

Any module, unit, component, server, computer, terminal, engine ordevice exemplified herein that executes instructions may include orotherwise have access to computer readable media such as storage media,computer storage media, or data storage devices (removable and/ornon-removable) such as, for example, magnetic disks, optical disks, ortape. Computer storage media may include volatile and non-volatile,removable and non-removable media implemented in any method ortechnology for storage of information, such as computer readableinstructions, data structures, program modules, or other data. Examplesof computer storage media include RAM, ROM, EEPROM, flash memory orother memory technology, CD-ROM, digital versatile disks (DVD) or otheroptical storage, magnetic cassettes, magnetic tape, magnetic diskstorage or other magnetic storage devices, or any other medium which canbe used to store the desired information and which can be accessed by anapplication, module, or both. Any such computer storage media may bepart of the device or accessible or connectable thereto. Further, unlessthe context clearly indicates otherwise, any processor or controller setout herein may be implemented as a singular processor or as a pluralityof processors. The plurality of processors may be arrayed ordistributed, and any processing function referred to herein may becarried out by one or by a plurality of processors, even though a singleprocessor may be exemplified. Any method, application or module hereindescribed may be implemented using computer readable/executableinstructions that may be stored or otherwise held by such computerreadable media and executed by the one or more processors.

The following relates to color palettes, and more particularly to acomputer-based system and method for generation of an interactive colorworkspace.

In the present embodiments, “palette” generally refers to a set of oneor more color swatches. “Workspace” can include one or more palettesalong with unused space for swatches and/or palettes, as generallyconsistent with the embodiments described herein.

While a color theme is important to any visual creation, generally,“color palettes” can be inefficient and not particularly user-friendly.

In an example, embodiments described herein can be advantageously usedto unify authoring of swatch palettes, continuous gradients, stepgradients and spatial blends with a unified, direct manipulation.According to embodiments presented herein, unified color workspacegeneration, referred to as “Color Builder”, is described. As describedherein, in an embodiment, the color workspace generation can generatethe palette based on user input, for example, via mouse or touch input.In this way, the color workspace generation can be used for play andfreeform exploration of color, qualities important for creativity.Advantageously, the present embodiments can allow users to rearrangepalette layout and visualize colors relative to each other. In addition,the present embodiments can provide in situ visualization of selectedcolors on an imported design, allowing exploration of color themeswithin a unified experience.

To facilitate seamless color exploration with direct manipulation, thepresent embodiments may further include an in-context color pickeroptimized for fine color adjustment. Unlike other approaches to colorpickers, which may confine the user to pre-defined color space axes, thepresent embodiments picking of colors can provide a comprehensive map ofthe color's local neighborhood and allow single-swipe tweaking of thecolor within this space. This color picker may be integrated into thepalette generation, but can also function independently, complementingother approaches to color picking.

Embodiments of the present disclosure may provide one or more of thefollowing features and advantages: analysis of existing color themeworkflows/software; versatile direct manipulation color theme authoringinterface that unites currently disjoint color workflows and supportsinteractive visualization; and contextual color picker design.

Referring now to FIG. 10, a system 100 for generation of an interactivecolor workspace, in accordance with an embodiment, is shown. In thisembodiment, the system 100 can be run on a local computing device (26 inFIG. 11). In further embodiments, the local computing device 26 can haveaccess to content located on a web server (32 in FIG. 11) over anetwork, such as the internet (24 in FIG. 11). In further embodiments,the system 100 can be run on any suitable computing device; for example,the web server (32 in FIG. 11).

In some embodiments, the components of the system 100 are stored by andexecuted on a single computer system. In other embodiments, thecomponents of the system 100 are distributed among two or more computersystems that may be locally or remotely distributed.

FIG. 10 shows various physical and logical components of an embodimentof the system 100. As shown, the system 100 has a number of physical andlogical components, including a central processing unit (“CPU”) 102(comprising one or more processors), random access memory (“RAM”) 104, auser interface 106, a network interface 108, non-volatile storage 112,and a local bus 114 enabling CPU 102 to communicate with the othercomponents. In some cases, at least some of the one or more processorscan be graphical processing units. CPU 102 executes an operating system,and various modules, as described below in greater detail. RAM 104provides relatively responsive volatile storage to CPU 102. The userinterface 106 enables an administrator or user to provide input via aninput device, for example a keyboard and mouse or a touchpad. The userinterface 106 can also output information to output devices to the user,such as a display and/or speakers. The network interface 108 permitscommunication with other systems, such as other computing devices andservers remotely located from the system 100, such as for a typicalcloud-based access model. Non-volatile storage 112 stores the operatingsystem and programs, including computer-executable instructions forimplementing the operating system and modules, as well as any data usedby these services. Additional stored data can be stored in a database116. During operation of the system 100, the operating system, themodules, and the related data may be retrieved from the non-volatilestorage 112 and placed in RAM 104 to facilitate execution.

In an embodiment, the system 100 further includes a workspace module120, a linking module 122, and a mapping module 124 that can be executedon the CPU 102. In some cases, the functions and/or operations of themodules can be combined or executed on other modules.

Discrete color palettes, for example as shown in FIG. 2A, comprised ofindependent color swatches, can be used as a representation of colorcombinations, for example, in design applications. Generally, users cancreate swatch palettes by manually adding individual colors. Theseswatch palettes or libraries can be shared in a variety of formats (e.g..aco, .ase, .swatches). In addition, some implementations allow users toconstruct, share and rate small (5-10 colors) swatch palettes. Thesimplicity of this approach has made swatch color palettes popular in anumber of applications, including applications in automatic paletteextraction from images, image recoloring and colorization,crowd-sourcing color aesthetics, and machine learning. In someapplications, automatic palette construction can be generated from animage. Generally, swatch palettes are limited to use cases where thenumber of relevant colors is small.

Gradients or transitions between two or more colors, for example asshown in FIGS. 2B and 2C, are common in a number of applications; forexample, where shading naturally introduces gradients. Gradientappearance can be hard to predict from endpoint colors alone, and merelysaving endpoint colors in a swatch palette can lose connection to theactual colors in the artwork. Smooth gradients, for example as in FIG.2B, can also be created, but generally they cannot be saved and accessedas a part of a reusable palette. In addition, complicated series ofsteps may be required to automatically construct discrete step-basedgradients, for example as shown in FIG. 2C.

A natural extension of a linear gradient is a general spatial colorblend. Generally, there is no established representation of this type ofgradient. Some approaches are to model continuous palettes by directlysimulating paint, or by approximating it with simplified color blobs.Some approaches automatically fit continuous blends, which cannot bedirectly edited. While compelling for their respective use cases, theseapproaches focus on the continuous case and do not generally naturallysupport discrete colors. In embodiments of the present disclosure, astructured representation spanning discrete and continuous palettes isprovided, while allowing interactive editing.

Advantageously, the present embodiments can optimize the technicalprocess of constructing reusable and versatile color themes encompassedin color palettes. Also advantageously, the present embodiments can bebroadly applicable across multiple visual domains where colorthemes/palettes are relevant.

While a red-green-blue (RGB) digital color space is generally mostcommon, other suitable color spaces can be used; for example, ahue-value-saturation (HSV), hue-white-black (HWB), CIELAB (Lab), CIEDE2000, and the like. Chosen color space may effect linear colorinterpolation. Various non-linear blending models are also available;for example, modeling paint layers, learning blending from data, orderiving aesthetically pleasing interpolation curves. In a particularexample embodiment, gradients can use RGB interpolation, and the colorpicker can use on RGB, HSV and Lab spaces.++

Generally, color pickers allow selecting or adjusting a color. Somecommon color pickers include the HSV color wheel, RGB sliders, and 2Dcolor space projections accompanied by a slider. Other approaches forexample, map HSV space to mouse controls (X, Y, scroll), but provide novisual guidance. Other approaches, for example, show a selection ofcolor alternatives similar to a base color by sampling along hue andvalue directions in HSV, or along analogous and complementary huedirections, stemming from color theory. Generally, these approacheseither provide only a very limited suggestion pool or present aredundant and unorganized grid of colors. Embodiments of the presentdisclosure can provide a contextual color picker for adjusting astarting color within its neighborhood, but also provides availablecolor adjustment directions and choices.

Generally, swatch palettes and gradients are important for color design.Swatch palettes can be used to help organize design colors; however,these palettes do not naturally support gradient colors.

Generally, tools supporting discrete swatch palettes (DS) and continuous(CG) or step gradients (SG) are disjointed. Smooth gradients generallyrequire manual steps to apply swatch colors to the gradient. Goingbetween a color palette and a gradient can be particularly cumbersome.Generating step gradients generally require either complex manualprocedures or a specialized step generator. If the seed colors change, auser must generally recreate the intermediate colors in a separatesoftware/workflow and manually re-import updated swatches into herpalette.

Lack of unified support for swatch palettes and gradients can induce afragmented workflow. Consider an example progression as shown in FIGS.3A to 3F. The designer (user) may choose an initial discrete palette(FIG. 3A), then use a separate step generator only to discover that thegradient is too faint (FIG. 3B). Necessary adjustments will requirere-generation of gradient colors (FIG. 3C). If the designer thenexperiments with a smooth gradient using the palette colors, she maydiscover that the rose reflection (FIG. 3C) clashes with the white-redgradient (FIG. 3D). Finally, a more complex tri-color blend may renderthe whole palette unusable due to the blending behavior between darkteal and red (FIG. 3E), causing the designer to rethink the entire setof colors (FIG. 3F). The present embodiments can generate a unifiedrepresentation and authoring tool for swatch palettes and gradients.

Color perception is generally inextricably linked to its context, andthus in-context visualization is important for color generation andselection. Some approaches rearrange the palette layout itself. Severalapproaches to palette tools can allow swatch re-ordering or stretching,and can allow full spatial rearrangement and swatch scaling. However,colors may appear very different on a more realistic design. In otherapproaches, approaches to palette tools may not offer any visualizationon a design, and some show colors mapped to regions of several fixeddesigns. Generally, with these approaches, more customized visualizationrequires importing the palette into another application, such as afull-featured Design Suite and inefficiently applying colors by hand.This can be disruptive because sometimes a color viewed individuallylooks soft but when placed in the mockup, looks very salient (or viceversa). In these approaches, this means going back to tweak it thenrepeating the process again. Advantageously, embodiments of the presentdisclosure allow both layout rearrangement (LR) and visualization on acustom design (VD), inviting uninterrupted color theme exploration.

Advantageously, embodiments of the present disclosure allow a user theability to experiment and explore, supporting creativity and inducingabsorption in a task or flow. In an example, embodiments of the presentdisclosure allow for simple direct manipulation interaction devoid ofspecialized and over-constrained widgets, menus, sliders and similar. Inthis way, embodiments of the present disclosure encourage freeformexploration and reflection-in-action, which can be important for design.Other approaches for exploration through direct manipulation can allowplaying with color circles and continuous gradients; however, thesetools do not support discrete swatches or step gradients, and can havelimited visualization.

The present inventors have determined that while a user's selection ofcolors for a color theme is important, adjusting initial selections canalso be important. Canonical color pickers, for example as illustratedin FIG. 7A, can provide fast access to the entire color space, but canhave challenges at finer adjustments. For example, a small adjustment ofan HSV color wheel generally results in a completely different color.The issue with granularity can be exacerbated when the color pickerinterface is small. Advantageously, embodiments of the presentdisclosure can provide color pickers (for example, an HSV color slider)for initial color selection, but also provide in-context coloradjustment that allows for experimentation and direct manipulation.

Advantageously, embodiments of the present disclosure can create, forexample, complex color palettes of swatches, gradients and tri-colorblends using direct manipulation, while providing quick visualizationand efficient adjustments of the colors. In an example of the presentembodiments, FIG. 4A shows an active grid 402, where swatches can beadded, combined and rearranged. FIG. 4A also shows a preview panecomprising an associated design 404, for some embodiments, where anassociated design comprising, for example, a fixed mockup or user's ownSVG vector graphic can be imported for quick visualizations. FIG. 4Bshows examples of color mock-ups that can be automatically generated. Inthis example, a color of a selected swatch 406 (shown here having aglowing edge) can be changed with a color picker; for example, using HSVsliders 408. In further cases, other color pickers can be incorporated;for example, an in-context color picker (referred to as a Color Tweaker)as described herein. In an example case, embodiments of the presentdisclosure can be implemented using a touch-optimized HTML5 Webimplementation, with interactions defined for both mouse and a touchscreen, to enable direct manipulation to have a natural feelinginteraction.

In embodiments described herein, there is provided, for example,approaches for creating and visualizing swatches, step gradients,visually smooth gradients and tri-color blends by the workspace module120 using direct manipulation swatch interactions on an active palettegrid 402. For example, as illustrated in FIG. 4A. In an example of thepresent embodiments, consider the progression illustrated in FIGS. 3A to3F and FIGS. 5A to 5R. The user can first create a discrete palette (forexample, as illustrated in FIG. 3A) by selecting on empty areas (in thiscase, blocks on a grid) in which case the workspace module 120 addsswatches (for example, as illustrated in FIG. 5A). The selected swatch,in this example indicated by a glowing border, as illustrated in FIG.5B, can be recolored by the workspace module 120 after receiving inputfrom a color picker; for example, with HSV sliders or other approach. Insome cases, the selection can be dragged around the display by the userand the workspace module 120 can snap it to the nearest grid block (forexample, as illustrated in FIG. 5D). In some cases, the selection can bedragged over an edge of the display and the workspace module 120 willdelete it (for example, as illustrated in FIG. 5E). In some cases, forswatches explicitly created by the user (referred to as controllableswatches), the workspace module 120 can produce a marking on it toindicate the explicit creation; for example, a circle handle marking intheir center. In some cases, a user may import a graphic (for example,an SVG graphic) as an associated design and the mapping module 124 canapply the selected palette to it (for example, as illustrated in FIG.3A), as described herein.

While the present embodiments describe use of a grid as a workspace, init understood that any suitable workspace can be used; for example, anon-segmented continuous workspace, a one-dimensional workspace, athree-dimensional workspace, and the like.

In some cases, the workspace module 120 can allow the user to create astep gradient; for example, as illustrated in FIG. 3B. In this example,the step gradient can be generated by dragging one controllable swatch,‘s₀’, next to another controllable swatch, ‘s₁’, as illustrated in FIG.5F. In a particular case, the workspace module 120 can perform collisiondetection to prevent swatch overlap. When so touches s₁, the workspacemodule 120 can associate s₀ to s₁ such that dragging s₀ in the oppositedirection automatically generates a gradient with the number of stepsproportional to how far it is dragged; for example, as illustrated inFIG. 5G. In this example, the number of steps being equivalent to thenumber of grid boxes intermediate s₀ and s₁. In some cases, once thegradient is generated, the workspace module 120 can increase or decreasethe number of steps when the user selects intermediate gradient colorsand dragging them up or down respectively (for example, as illustratedin FIG. 5h ).

In some cases, after the application of the gradient colors in the stepgradient to the visualized artwork (shown in FIG. 3B), the user mayrealize, for example, that it is desirable to have more contrast. Theuser can select one of the controllable swatches located at gradientswatch endpoints (for example, as illustrated in FIG. 5I) and theworkspace module 120 can recolor the selected swatch when the userre-selects a color from the color picker (as described above). In thiscase, the workspace module 120 can automatically alter the intermediatecolors of the gradient for immediate visualization (for example, asillustrated in the palette in FIG. 3C).

In some cases, the user may also decide that it is desirable to recolorone or more of the swatches to coordinate with the newly generatedgradient described above. The palette can be reorganized by theworkspace module 120, when the user drags swatch endpoints of thegradient, to lengthen or shorten the gradient, or to move the gradientto a different area of the display. In this example, for simplicity oforganization, the gradients can be constrained to stay horizontal orvertical (for example, as shown in FIG. 5J). In some cases, theworkspace module 120 can delete the gradient when the user drags one ofthe swatch endpoints of the gradient close to the other, activatingdeletion markers (for example, as illustrated in FIG. 5K). In somecases, even though the gradient is deleted, the swatch endpoints canremain. In some cases, the user can associate additional gradients tothe parent gradient by associating a controllable swatch with anintermediate swatch in the gradient; for example, as illustrated in FIG.3D. In some cases, these additional gradients can be visually continuousgradients; which, in this example, can prompt the user to select acoordinating color for the city reflection from the continuous gradient.Note that high subdivision (step count) approaches a visually smoothgradient, however, in some cases, a step gradient palette can beautomatically converted into a continuous smooth gradient palette once apredetermined number of steps is reached or once indicated by the user.

In some cases, the user may discover that the color choices are notsufficiently aesthetically pleasing while blended (for example, asillustrated in FIG. 3E). In some cases, the workspace module 120 cangenerate gradients of three or more controllable swatches (referred toas a “blend”) using barycentric coordinates of intermediate swatches forlinear RGB interpolation of three or more colors. In the above example,if a controllable swatch 52 is dragged near the intermediate swatches inan s₀-s₁ gradient, the workspace module 120 associates it to thegradient, and dragging controllable swatch 52 in the opposite directiongenerates a pyramid of intermediate colors. In some cases, the pyramidcan have the same step number as in the base gradient (for example, asillustrated in FIGS. 5L and 5M). As with gradients described above, insome cases, swatch endpoints of a tri-color blend can be recolored, andthe number of steps can be modified (for example, as illustrated in FIG.5N). In some cases, dragging one of the controllable swatches (s₀, s₁,s₂) near its neighbor can display deletion indicators, while releasingthe controllable swatch this state can cause the blend to be deleted bythe workspace module 120 (for example, as illustrated in FIG. 5O). Insome cases, when dragging the swatch endpoints, the base gradient can beconstrained to stay horizontal or vertical and the other controllableswatches (s₂) can adjust to avoid obtuse angles. In some cases, blendscan have horizontal or vertical orientation. As with gradients above, insome cases, blends can be automatically converted into a continuoussmooth gradient once a predetermined number of steps is reached or onceindicated by the user.

While the present embodiments generally describe using linear blending,it is appreciated that any suitable blending can be used or gradientsand/or three color blends. For example, blending of selectable simulatedphysical paints using the Kubelka-Munk equation and allowing the user toselect colors that correspond to the simulated physical paints ascontrollable swatches. In further cases, the blending behavior may becontrolled by the user as a separate parameter.

In some cases, the workspace module 120 can associate swatches whencontacted. In some cases, to prevent accidental gradients and blends,newly-formed gradients and blends can have “auto-snap”; whereby theassociation is automatically cancelled if the dragged swatch travelsbeyond a predetermined valid geometric configuration. For example, if s₀in FIG. 5P touches s₁, a gradient is created, but as s₀ continues totravel beyond horizontal gradient orientation (FIG. 5Q), the temporarygradient is automatically cancelled (FIG. 5R).

As exemplified in FIGS. 6A to 6D, in addition to palette layoutrearrangement, the present embodiments allow importing an associateddesign to be colorized (for example, in an SVG vector format) for quickvisualization of the colors selected above. In this case, the linkingmodule 122 can automatically group SVG colors and display them, forexample in a Linking Pane 410 as illustrated in FIGS. 4A and 6A). TheLinking Pane 410 can include one or more linked blocks that are eachassociated with an area of the associated design; each linked area ofthe associated design may comprise an area having a common block to becolored or otherwise to be colored similarly. Thus, a color in the colorworkspace can be associated with one of the blocks of the Linking Pane410, which in turn provides an assignment of color to an area of theassociated design. In some cases, the Linking Pane 410 can have “locks”associated with each of the blocks, as described herein. In some cases,the Linking Pane 410 can also include a randomization button torandomize the colors of the blocks with respect to the color workspace,as described herein. In some cases, the number of blocks in the LinkingPane 410 can be equivalent to the number of swatches in the colorworkspace and/or the number of areas to be colored in the associateddesign. In other cases, the number of blocks in the Linking Pane 410 canbe selected by the user, and the colors in the design can be clusteredinto this many groups. In some cases, the association of each block inthe Linking Pane 410 to an area of the associated design can be made onthe basis of areas of the design that generally color similarly. In somecases, this association can be selected manually by the user.

In some cases, the color of the Linking Pane block can be assigned toany swatch in the palette, whether or not that swatch is controllable orpart of a gradient. In some cases, the workspace module 120 can randomlyassign palette colors; and thus, the random colors will be associatedwith blocks of the Linking Pane by the linking module 122 and associatedto areas of the associated design by the mapping module 124. Forexample, when the linking module 122 receives an associated command fromthe user. In an example, such a command can be a button 602 like thatillustrated in FIG. 6A. In other cases, the palette colors can bemanually assigned by the user by manually linking certain color groupsof the illustration to specific palette colors; for example, using theLinking Pane as illustrated in FIG. 6A. Advantageously, in some cases,both random assignment and manual assignment can be used which allowsfor flexible visualization between full control and quick automaticpreview.

In an example, consider FIG. 3E, in which the color combinations in thetri-color blend are not sufficiently aesthetically pleasing according tothe user. Suppose that the user has mapped all the color groups in theLinking Pane to the colors in an associated design as per the linkindicators 604 illustrated in FIG. 6A. In this example, the user may tryout different color combinations by selecting a different color for afew of the controllable swatches in the color workspace, thus the system100 can instantaneously and automatically recolor the associated design(for example, as illustrated in FIG. 6B). As an example, at this point,the user may feel that the manual selections are too bold. To receiveautomatic impressions for other colors and blends in the palette on theassociated design, the user can select one or more blocks in the LinkingPane to unlock the associated colors of the associated design. The usercan then select the button 602 to randomize the unlocked Linking Paneblocks. The randomization can be performed repeatedly to get new ideasfor the colorization of the associated design, while keeping the lockedcolors constant (in the example of FIG. 6C, the city colors areconstant). The user can also unlock all the blocks in the Linking Pane,and cycle through totally random assignments (for example, asillustrated in FIG. 6D). Advantageously, this easy and effortlessapproach to color cycling can provide a quick feel for the interplay ofcolors in a starter palette and help serendipitously discover successfulblends.

In an embodiment, the workspace module 120 can provide an approach forexploring a three-dimensional (3D) color neighborhood by providing acolor picker that presents a contextual neighborhood map (for example,as illustrated in FIG. 7). In this embodiment, the user can select acontrollable swatch and the workspace module 120 activates a 3Dneighborhood color map centered at that color and allows directmanipulation color adjustment within the active grid of the colorworkspace. In this embodiment, the user can explore the color of the 3Dmap, recoloring the selected swatch, and then select the swatch again toclose the 3D map. In some cases, the 3D map can be manipulated (rotatedor zoomed) with inputs or gestures; for example, pinching in or out orscrolling of a mouse wheel. Advantageously, the 3D map allows adjustingof colors without navigating to a separate widget.

Generally, 3D color spaces (for example, RGB, HSV, and Lab) afford noobvious way to lay out a local map on a 2D screen. Other color pickersgenerally project the view on 2 dimensions and add a slider for thethird (for example, as illustrated in FIG. 7A). This can make itdifficult to explore diagonal directions, and the hunt for the rightadjustment may require multiple slider moves. Neighboring colorinterfaces (for example, as illustrated in FIG. 7B) show colors samplednear a base color, but present either a small number of discrete choicesor an unorganized map. In the present embodiments, however, theworkspace module 120, when generating the 3D map, can select ‘tweak’directions that comprehensively sample the space of possibilities, andlays them out radially around the source swatch in 2D, interpolating inbetween. The result is a single smooth map showing a rich variety ofeasily accessible local colors (for example, as illustrated in FIG. 7C).In some cases, to match the grid layout, the workspace module 120 candiscretize the 3D color map, and annotate it with tweak directions forguided navigation.

To generate viable tweak directions, D={d₀ . . . d_(k)}, the workspacemodule 120 can generate a plurality of neighbours (for example, 12neighbors) around the source color c by incrementing and decrementingdimensions. In a particular case, the incrementing and decrementingdimensions can be in HSV and RGB. This yields an associated number ofvectors (in this example, 12 vectors); which can represented in the moreperceptually uniform Lab space. These standard exploration directionsare useful, but in some cases may not sample the neighborhood equallywell for all colors; for example, as shown in FIG. 8A where −G and −Hdirections may coincide. To find augmenting directions, the workspacemodule 120 uniformly samples vectors around c and selects a subset byfurthest point sampling (arc distance on a unit sphere is used fornormalized vectors in D). Samples are added to D until it reaches apredetermined size (for example, k=15). Note that the number ofadditions is variable, as the starting set may have duplicates. Theaugmenting directions improve the sampling of the neighborhood (forexample, as illustrated in FIG. 8B), resulting in more comprehensivevisualizations.

Once D reaches the predetermined size, each vector d_(i) is converted inLab to a neighboring color a_(i) by adding z_(i)d_(i) to the sourcecolor c; where z_(i) is the zoom value. While the color map has a globalzoom level z, binary search can be used to find the largest z_(i)≤z,such that a_(i) falls within the valid color gamut. As some directionsmay truncate early, discard those a_(i) that fall within τ of each otheror c in the Lab space (in an example, τ=8.0 can be used). The workspacemodule 120 then finds a smooth ordering of the neighbors a_(i); forexample, using a greedy approximation of the Traveling Salesman Problem(TSP) over L2 Lab distances. The workspace module 120 then lays out theordered colors radially around the source swatch, and in some cases,snapping each to a grid edge. In some cases, the angles can beproportional to the smoothed Lab distances between a_(i)'s. Linear RGBinterpolation within each wedge can produce a smooth blend ofalternatives, and in some cases, each direction can be annotated withits meaning (for example, as illustrated in FIG. 7D). In thisembodiment, interactively changing the zoom z can affect the range ofdisplayed color possibilities. Advantageously, the color map runs inreal time. In some cases, the user can keep the neighborhood map opensuch that the map automatically changes as the starting color for theswatch is adjusted with the HSV sliders or another method.

While the above embodiments describe generating a neighborhood map fornavigating a 3D color space using a visualization in 2D, it isunderstood that this approach to generating a neighborhood map can beused for other types of spaces. In other cases, with a space that islow-dimensional but higher than 2, the same approach can be applied. Forexample, the tweak directions D can be generated by uniformly samplingthe space, or D can augment a number of directions that already existfor the space using furthest point sampling, as described above. Then,the approach specified above with respect to color maps can be used tolay out the directions and interpolate on the 2D grid (i.e. the map).Each square in the map can contain another visualization depending onthe space being explored; for example, a facial expression, a renderingof a parametric 3D geometry surface, or the like.

FIG. 3 illustrates a method 300 for generation of an interactive colorworkspace, in accordance with an embodiment. At block 302, the workspacemodule 120 generates a grid. At block 304, the workspace module 120receives successive input from the user to create two or morecontrollable color swatches, the controllable color swatches comprisingan associated color, and generates the controllable color swatches onthe grid. At block 306, upon receiving a command from a user to selectand associate at least two of the controllable color swatches, theworkspace module 120 generates a gradient of colors with the colors ofthe selected controllable color swatches as endpoints to the gradient.

At block 308, in some cases, the workspace module 120 generates asecondary gradient of colors after receiving input from the user toassociate the gradient of colors with a first-additional controllablecolor swatch, the secondary gradient of colors comprising endpoints asthe color of the first-additional controllable color swatch and thecolor of a selected color in the gradient of colors.

At block 310, in some cases, the workspace module 120 generates atertiary gradient of colors after receiving input from the user toassociate the secondary gradient of colors with a second-additionalcontrollable color swatch, the secondary gradient of colors comprisingan area bound at least by the first-additional controllable colorswatch, the second-additional controllable color swatch, and theselected color in the gradient of colors.

At block 312, in some cases, the linking module 122 associates at leastone of the color swatches with at least one associated block. At block314, in some cases, the mapping module 124 colors an associated designwith the color of at least one swatches in the color workspace, forexample, the color of at least one of the associated blocks.

In an example verification of the present embodiments, conducted by thepresent inventors, ten impartial experts and professionals in the fieldsof graphic design, illustration, or UI/UX design were recruited toevaluate the present embodiments. The verification study aimed toevaluate aspects of the present embodiments; including the overalleffectiveness at color theme authoring, the contextual color picker, andthe linked and random color visualization. To this effect, two taskswere designed, each administered in two conditions: condA using thepresent embodiments, and condB using other commercially availablealternatives.

For a first task, each participant was asked to come up with ahypothetical design project (e.g. a party poster) and design a startingcolor theme for it using condA and condB (in this case, Paletton). Thecondition order was reversed for half of the users, and task time wascapped at 7 minutes per condition. For a second task, each participantwas asked to edit a color theme linked to a design. In condA,participants adjusted the color of a swatch and a gradient linked to avisualization. In condB, participants worked with Adobe Photoshop colorpicker and Illustrator swatch panel linked to the same design. Up to 5minutes were allocated to each condition. Paletton was chosen forcomparison in for the first task, because it is a dedicated palettetool, like our interface, and supports several dimensions.

Evaluation of the present embodiments for the two tasks used aCreativity Support Index (CSI), which uses a research-testedquestionnaire to rate creativity support of an interface using 5factors: Collaboration, Enjoyment, Exploration, Expressiveness,Immersion and Results Worth Effort. The CSI assigns an overall score of0 (worst) to 100 (best), and is most meaningful when comparing twointerfaces on a specific task. The CSI questionnaire was administeredafter each condition in the tasks.

TABLE 1 Paletton ColorB. CSI Factor Score Score T-test resultExpressiveness 32.4 50.2 p = 0.0129 Enjoyment 20.3 31.6 p = 0.0170Exploration 35.8 55.5 p = 0.0173 Immersion 15.8 29.2 p = 0.0378 ResultsWorth Effort 29.2 43.0 p = 0.0983 Overall CSI 44.8 71.8 p = 0.0067

As exemplified in TABLE 1, the present embodiments performedconsiderably better than the control, achieving the mean CSI score of71.8 (std=14.0), compared to the score of 44.8 (std=21.7) for Paletton.To estimate statistical significance of this result, a one-tail pairedsamples t-test was used with the null hypothesis that the true CSI meansare the same. The t-test rejected the null hypothesis with a low p-valueof 0.0067. It is also meaningful to look at the performance of theinterfaces for specific CSI factors (TABLE 1). The present embodimentsoutperformed Paletton, especially in Expressiveness. Like most palettetools, Paletton is restricted to a small number of colors, while thepresent embodiments allow more efficient and expressive palette andgradient generation. For example, see FIG. 9A illustrating example usesof Paletton and FIG. 9B illustrating example uses of the presentembodiments. The users created 4-22 controllable swatches (mean 7.2),and all but one made at least one gradient/blend. Six users added 2-6gradients, and four experimented with three color blends. Color Builderalso scored consistently better in Exploration, likely due to itsfreeform nature and the exploratory color picker. Better performance onEnjoyment is generally consistent with most of the qualitative feedbackreceived from the users.

As evidenced in the example verification, the present embodimentsadvantageously support for exploration and play, and increase speed ofexperimentation. Further, the present embodiments provide an efficientand intuitive interaction over prior approaches; for example, theimmediate visualization and the ability to effortlessly generate andview gradients/blends and tweak colors when authoring a color theme.Additionally, the present embodiments advantageously provide animmediate overlay of the current palette on the color map and associateddesign in real time.

In some cases, because the interactive color workspace is compact, theapproach of the present embodiments makes it possible for remoteretrieval; for example, store an inputted workspace configuration, arecolored design, or both, on a server. This information can then beretrieved from the server given, for example, a URL parameter. In anexample, the URL parameter can be swatch colors themselves, or anothervalue that is used to control the palette on the server side, which inturn recolors the image that the server returns. As an example, considera website with a mountain and sky background, provided in html as <imgsrc=′/my_sunset.png?timestr={dynamic_value}”>. Before providing theimage, the server could change the palette based on the timestrparameter, then recolor the background and serve that to the client. Inthis way, advantageously, a large number of different images could beserved without having to save all the individual images on the server,as would generally currently be required for such types of variations.

The present invention may be embodied in other specific forms withoutdeparting from the spirit or essential characteristics thereof. Certainadaptations and modifications of the invention will be obvious to thoseskilled in the art. Therefore, the presently discussed embodiments areconsidered to be illustrative and not restrictive, the scope of theinvention being indicated by the appended claims rather than theforegoing description and all changes which come within the meaning andrange of equivalency of the claims are therefore intended to be embracedtherein. Additionally, the entire disclosures of all references citedabove are incorporated herein by reference.

The invention claimed is:
 1. A computer-implemented method forgeneration of an interactive color workspace, the method comprising:generating a workspace; receiving successive inputs from a user tocreate two or more controllable color swatches, the controllable colorswatches each comprising an associated color; generating thecontrollable color swatches on the workspace; upon receiving thesuccessive inputs from the user, generating a primary gradient of colorscomprising the colors associated with the controllable color swatches asprimary endpoints to the primary gradient of colors; receiving furtherinput to create a first-additional controllable color swatch, thefirst-additional controllable color swatch comprising an associatedcolor; generating a secondary gradient of colors having secondaryendpoints comprising the first-additional controllable color swatch andone of the endpoints of the gradient of colors; and generating aselectable gradient of colors defining a two-dimensional area bound atleast by the primary gradient of colors on a first side of thetwo-dimensional area and the secondary gradient of colors on a secondside of the two-dimensional area.
 2. The method of claim 1, wherein theworkspace comprises a grid, and wherein each of the controllable colorswatches comprise separate cells in the grid.
 3. The method of claim 2,wherein the primary gradient of colors and the secondary gradient ofcolors comprises a step gradient, each step in the step gradientcomprising a separate cell in the grid.
 4. The method of claim 1,wherein associating two of the controllable color swatches comprisesreceiving input of a first of the controllable color swatches movingwithin a predetermined proximity of the other a second of thecontrollable color swatches and receiving input separating the first ofthe controllable color swatches from the second of the controllablecolor swatches, wherein the gradient of colors is generated between theseparated first of the controllable color swatches and the second of thecontrollable color swatches.
 5. The method of claim 1, whereingranularity of the color gradient is proportional to a distance of theendpoints relative to the workspace.
 6. The method of claim 1, whereingranularity of the color gradient is selectable by the user.
 7. Themethod of claim 1, further comprising receiving a design from the user,and associating one or more colors in the workspace each with at leastone area of the design.
 8. The method of claim 7, further comprisingreceiving further input from the user to change the associated color ofat least one of the controllable color swatches, and changing theassociated one or more colors in the workspace.
 9. The method of claim1, further comprising: receiving input from the user to select one ofthe controllable color swatches; displaying a neighborhood color mapcentered at the color associated with the selected controllable colorswatch, the neighborhood color map comprising a gradient of colorsdistributed radially around the color associated with the selectedcontrollable color swatch as a center of the neighborhood color map;receiving a selection from the user of a color in the neighborhood colormap; and modifying the color associated with the selected controllablecolor swatch to the selected color.
 10. The method of claim 9, whereinthe neighborhood color map is a two-dimensional (2D) visualization of athree-dimensional (3D) neighborhood color map, the 2D visualizationbeing manipulatable with respect to the 3D neighborhood color map viainput from the user.
 11. A system for generation of an interactive colorworkspace, the system comprising one or more processors and a datastorage, the one or more processors configured to execute a workspacemodule to: generate a workspace; receive successive inputs from a userto create two or more controllable color swatches, the controllablecolor swatches each comprising an associated color; generate thecontrollable color swatches on the workspace; upon receiving generatinga workspace; receiving successive inputs from a user to create two ormore controllable color swatches, the controllable color swatches eachcomprising an associated color; generating the controllable colorswatches on the workspace; upon receiving the successive inputs from theuser, generating a primary gradient of colors comprising the colorsassociated with the controllable color swatches as primary endpoints tothe primary gradient of colors; receiving further input to create afirst-additional controllable color swatch, the first-additionalcontrollable color swatch comprising an associated color, generating asecondary gradient of colors having secondary endpoints comprising thefirst-additional controllable color swatch and one of the endpoints ofthe gradient of colors; and generating a selectable gradient of colorsdefining a two-dimensional area bound at least by the primary gradientof colors on a first side of the two-dimensional area and the secondarygradient of colors on a second side of the two-dimensional area.
 12. Thesystem of claim 11, wherein the controllable color swatches are moveableto different areas of the workspace, wherein associating two of thecontrollable color swatches comprises receiving input of a first of thecontrollable color swatches moving within a predetermined proximity of asecond of the controllable color swatches and receiving input separatingthe first of the controllable color swatches from the second of thecontrollable color swatches, wherein the gradient of colors is generatedbetween the separated first of the controllable color swatches and thesecond of the controllable color swatches.
 13. The system of claim 11,the one or more processors further configured to execute a mappingmodule to receive a design from the user, and associate one or morecolors in the workspace each with at least one area of the design. 14.The system of claim 11, the workspace module further: receives inputfrom the user to select one of the controllable color swatches; displaysa neighborhood color map centered at the color associated with theselected controllable color swatch, the neighborhood color mapcomprising a gradient of colors distributed radially around the colorassociated with the selected controllable color swatch as a center ofthe neighborhood color map; receives a selection from the user of acolor in the neighborhood color map; and modifies the color associatedwith the selected controllable color swatch to the selected color. 15.The system of claim 14, wherein the neighborhood color map is atwo-dimensional (2D) visualization of a three-dimensional (3D)neighborhood color map, the 2D visualization being manipulatable withrespect to the 3D neighborhood color map via input from the user.